<!DOCTYPE html>
<html>
<head>
	<title>薪资水平分析</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<meta charset="utf8">
	
	<script type="text/javascript" src="js/login.js"></script> 
	
	<script src="js/echarts.min.js"></script>
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/ip.js"></script>
	<style type="text/css" media="screen">
		body {
			background-image: url('./images/pie_back.jpg');
			width: 100%;
			height: 100%;
			background-repeat:no-repeat ;
			background-size:100% 100%;
			background-attachment: fixed;
		}
		#container{
			height:auto;
			width: 50%;
			left: 25%;
			right: 25%;
			position: absolute;
			border: 1px solid black;
			margin-top: 2%;
			margin-bottom: 10%;
			background-color: #ffffff;
			
		}
		#chartContainer{
			width: 80%;
			height: 800px;
			margin-left: 10%;
			margin-bottom: 5%;
		}
		#page_title{
			margin-top: 10%;
			margin-bottom: 1%;
			height: 10%;
			width: 80%;
			margin-left: 10%
		}
		#page_title p{
			font-size: 40px;
		}
		#addCity{
			height: 40px;
			margin-bottom: 30px;
		}
		#addCityInput{
			height: 100%;
			border: 1px solid black;
			border-radius: 3px;
		}
		#addCityButton{
			margin-right: 13%;
			margin-left: 1%;
		}
		#addCityButton:hover {
			color: #444;
			background: #eee;
			border-color: #ccc;
			text-decoration: none
		}
	</style>
	<script type="text/javascript">
		function showChart(dataToShow,fieldList,cityList){
			var myChart = echarts.init(document.getElementById('chartContainer'));
			var option = {
				title: {
					text: '行业类别\n\n'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data:fieldList
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					top:'20%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: cityList
				},
				yAxis: {
					type: 'value',
					scale:true,
					name:"薪资(k/月)",
					interval:0.5,			      
					max:26

				},
				series: dataToShow
			};
			myChart.setOption(option);
		}
		var cityList=new Array("北京","上海","深圳","广州","武汉");
		var fieldList=["互联网","房地产","金融","市场"];		
		function getData(cityList,reAnalysis){			
			var cities=cityList;
			$.ajax({
				"url":defaultIp+"/salaryanalysis",
				"type":"post",
				// "traditional":true,
				//"dataType":"json",
				// "contentType":"application/json",
				"data":{
					"cities":JSON.stringify(cities),
					"reAnalysis":reAnalysis
				},
				"success":function(result){
				    //show
				    $("#loadimg").hide("slow");
				    var res=parseResult(result);
				    showChart(res,fieldList,cityList);
				},
				"error":function(result){
					console.log(result);
					console.log("查询失败!");
				    //showChart(data,fieldList,cityList);
				    alert("获取数据失败!");
				}
			});
		}
		function parseResult(result){
			console.log(result);			
			var res=[];
			fieldList=[];
			//
			fieldList.push('');	
			fieldList.push('');	
			fieldList.push('');			
			for(var fieldIndex in result){
				var jobClass=result[fieldIndex]["jobClass"];
				fieldList.push(jobClass);
				var salaryList=result[fieldIndex]["jobSalaryList"];
				var tempObj={};
				for(var cityIndex in cityList){
					tempObj[cityList[cityIndex]]="";
				}
				for(var listIndex in salaryList){
					var city=salaryList[listIndex];
					tempObj[city["city"]]=city["avgSalary"];
				}				
				var tempArr=[];
				for(var key in tempObj){
					tempArr.push(tempObj[key]);
				}
				var item={};
				item["name"]=jobClass;
				item["type"]="line";				
				item["data"]=tempArr;
				res.push(item);
			}

			return res;
		}
		function addCity(){
			var city=document.getElementById("addCityInput").value;
			if(city==""){
				alert("填写后重试");
				return;
			}
			console.log(city);
			document.getElementById("addCityInput").value="";
			if(cityList.indexOf(city)!=-1){
				alert("城市已经存在!");
				return;
			}
			cityList.push(city);
			getData(cityList,"0");
			console.log(cityList);
		}

		window.onload=function(){
			getData(cityList,"1");
		}
	</script>
</head>
<body>
	<div id="container">
		<div id="page_title">
			<div id="page_title_text" class="text ">
				<p><span></span>
					<span>薪资水平分析</span>
					<span id="loadimg"><img src="./images/timg.gif"></span>
				</p>
			</div>
		</div>
		<div id="addCity" align="right">
			<input type="text" id="addCityInput"/>
			<button type="button" onclick="addCity()" id="addCityButton" class="btn btn-default">添加城市</button>
		</div>
		<div id="chartContainer" >
		</div>
	</div>
</body>
</html>